<template>
  <div>
    <div id="box">
      <div id="top11">
        <!-- 最顶端部分 -->
        <v-header title="确认订单" :back="true"></v-header>
        <!-- 收货地址部分 -->
        <div id="beijing">
          <div id="dizhi">
            <div v-if="$route.query.addressid">
              <p>{{address.username}} {{address.userphone}}</p>
            <span>{{address.location}}</span>
            </div>
            
          </div>
          <p @click="$router.push('/dizhiguanli')">+点击完善收货地址</p>
        </div>
      </div>

      <!-- 内容部分 -->
      <div id="neirong">
        <div class="n1">
          <div class="left1">
            <span class="iconfont">&#xe612;</span>
            <i>品牌精选</i>
          </div>
          <div class="right1">
            <span>已免运费</span>
            <i>|</i>
            <em>领券</em>
          </div>
        </div>
        <div class="n2">
          <img src="../../assets/images/shop.jpg" alt="" />
          <div>
            <p class="p1">溪牧原山茶花洁面泡沫 氨基酸洗面奶150ML 亲近舒缓</p>
            <p class="p2">
              <b><span>￥</span><i>999</i></b>
              <b><em>×1</em></b>
            </p>
            <p class="p3"><span>7天无理由退货</span><i>特价</i></p>
          </div>
        </div>
        <div class="n4">
          <h3>发票类型</h3>
          <div>
            <span>不开发票</span>
            <i class="iconfont">&#xe601;</i>
          </div>
        </div>
        <div class="n5">
          <h3>售后免邮</h3>
          <p>部分商家赠送</p>
        </div>
        <div class="n6">
          <h3>买家留言</h3>
          <p>填写内哦让你故需要与商家协商并确认，45字以内</p>
        </div>
      </div>
      <!-- 内容下面部分 -->
      <div id="jiner">
        <div>
          <h3>商品金额</h3>
          <p>￥1998</p>
        </div>
        <div class="d2">
          <h3>优惠活动</h3>
          <p>-￥200</p>
        </div>
        <div>
          <h3>售后免邮</h3>
          <p>商家赠送</p>
        </div>
      </div>

      <!-- 合计部分 -->
      <div id="heji">
        <div class="d1">
          <p class="p1">合计</p>
          <p class="p2">已免运费</p>
        </div>
        <div class="d2">
          <p class="p1">￥1998</p>
          <p class="p2">已优惠￥200元</p>
        </div>
        <i>确认订单</i>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      //1.地址
      address: {},
      //3.购物车
      shopList: [],
    };
  },
  mounted() {
    //2.查询地址
    if (this.$route.query.addressid) {
      axios({
        url: "/api/addresslist",
        method: "get",
        params: {
          uid: JSON.parse(localStorage.getItem("userInfo")).uid,
          id: this.$route.query.addressid,
        },
      }).then((res) => {
        this.address = res.data.list[0];
      });
    }
    //4.查询购物车
    let idstr = JSON.parse(localStorage.getItem("orderInfo")).idstr; //"8,10,12"
    let idArr = idstr.split(","); //["8","10","12"]
    idArr.forEach((id) => {
      axios({
        url: "/api/cartlist",
        method: "get",
        params: {
          uid: JSON.parse(localStorage.getItem("userInfo")).uid,
          id: id,
        },
      }).then((res) => {
        //从后端取回来数据，添加到shopList()
        this.shopList.push(res.data.list[0]);
        console.log(this.shopList);
      });
    });
  },
};
</script>

<style scoped>
/*收货地址部分*/
#beijing {
  background: #ff6040;
  height: 1.5rem;
}
#dizhi {
  width: 7.1rem;
  height: 2.08rem;
  background: #fff;
  margin: 0 auto;
  border-radius: 0.15rem;
  padding: 0.4rem;
  box-sizing: border-box;
}
#beijing p {
  /* font-size: 0.34rem;
  color: #333;
  font-weight: bold;
  margin-bottom: 0.2rem; */
  text-align: center;
  font-size: 0.3rem;
  width: 4rem;
  margin: auto;
  padding: 0.2rem;
  color: orange;
  border-radius: 0.15rem;
  border: 1px solid orange;
  background: rgba(255, 165, 0, 0.1);
  margin-top: -1.5rem;
}
/* #dizhi span {
  font-size: 0.26rem;
  color: #6e6e6e;
} */
/*内容部分*/
#neirong {
  margin-top: 0.8rem;
  background: #fff;
  padding: 0 0.2rem;
  height: 8.4rem;
}
#neirong .n1 {
  display: flex;
  justify-content: space-between;
  height: 1.12rem;
  line-height: 1.12rem;
}
#neirong .n1 .left1 span {
  font-size: 0.32rem;
  color: #ff6040;
  font-weight: bold;
}
#neirong .n1 .left1 i {
  font-size: 0.32rem;
  font-weight: bold;
  color: #333;
}
#neirong .n1 .right1 span {
  font-size: 0.24rem;
  color: #333;
}
#neirong .n1 .right1 i {
  color: #979797;
  width: 0.02rem;
  font-size: 0.24rem;
  margin: 0 0.1rem;
}
#neirong .n1 .right1 em {
  color: #ff6445;
  font-size: 0.24rem;
}
#neirong .n2 {
  display: flex;
  margin-bottom: 0.4rem;
}
#neirong .n2 img {
  width: 2.16rem;
  margin-right: 0.3rem;
}
#neirong .n2 .p1 {
  font-size: 0.3rem;
  width: 4.6rem;
}
#neirong .n2 .p2 {
  display: flex;
  justify-content: space-between;
  margin-top: 0.36rem;
  margin-bottom: 0.2rem;
}
#neirong .n2 .p2 span {
  font-size: 0.16rem;
  color: #ff6040;
}
#neirong .n2 .p2 i {
  color: #ff6040;
  font-size: 0.32rem;
  font-weight: bold;
}
#neirong .n2 .p2 em {
  font-size: 0.24rem;
  color: #333;
}
#neirong .n2 .p3 span {
  font-size: 0.18rem;
  color: #fff;
  background: #ff8066;
  margin-right: 0.1rem;
  padding: 0.06rem;
}
#neirong .n2 .p3 i {
  font-size: 0.18rem;
  color: #fff;
  background: #ff8066;
  padding: 0.06rem;
}
#neirong .n4 {
  display: flex;
  justify-content: space-between;
  height: 0.6rem;
  line-height: 0.6rem;
}
#neirong .n4 h3 {
  font-weight: bold;
}
#neirong .n5 {
  display: flex;
  justify-content: space-between;
  height: 0.6rem;
  line-height: 0.6rem;
}
#neirong .n5 h3 {
  font-weight: bold;
}
#neirong .n5 p {
  color: #848484;
}
#neirong .n6 {
  display: flex;
  justify-content: space-between;
  height: 0.6rem;
  line-height: 0.6rem;
  margin-bottom: 0.4rem;
}
#neirong .n6 h3 {
  font-weight: bold;
}
#neirong .n6 p {
  color: #848484;
}
@media screen and (max-width: 360px) {
  #neirong .n6 p {
    width: 4.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/*内容下面部分*/
#jiner {
  padding: 0 0.2rem;
  background: #fff;
  margin-top: 0.2rem;
  margin-bottom: 2rem;
}
#jiner div {
  display: flex;
  justify-content: space-between;
  height: 0.6rem;
  line-height: 0.6rem;
}
#jiner div h3 {
  font-weight: bold;
}
#jiner div p {
  color: #686868;
}
#jiner div:nth-child(3) {
  margin-bottom: 1.5rem;
}
#jiner .d2 p {
  color: #ff6040;
}
/*合计部分 */
#heji {
  position: fixed;
  bottom: 0;
  width: 7.3rem;
  background-color: #fff;
  padding-left: 0.2rem;
  height: 0.98rem;
  border-top: 1px solid #ccc;
}
#heji .d1 {
  float: left;
  margin-top: 0.1rem;
  margin-right: 0.1rem;
  width: 1.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#heji .d1 .p1 {
  font-weight: bold;
  font-size: 0.3rem;
}
#heji .d1 .p2 {
  font-size: 0.2rem;
  color: #a3a3a3;
}
#heji .d2 {
  float: left;
  margin-top: 0.1rem;
  width: 1.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#heji .d2 .p1 {
  font-size: 0.3rem;
  color: #ff6040;
}
#heji .d2 .p2 {
  font-size: 0.2rem;
  color: #a3a3a3;
}
#heji i {
  float: right;
  width: 2.2rem;
  height: 0.98rem;
  background: #ff6040;
  color: #fff;
  font-size: 0.32rem;
  line-height: 0.98rem;
  text-align: center;
}
</style>